<template>
  <a-spin :spinning="confirmLoading">
    <div class="container">
      <div class="auto">
        <div class="rule_wrap">
        <div class="pub_tit clearfix wow fadeInDown animated" data-wow-delay="0.1s">
          <em class="bt">实验室设备</em> | Equipment
          <!-- <a href="#" class="add fr">+ 新增</a> -->
          <a-button type="primary" class="fr" icon="plus" @click="addDevice" v-if="isShowBtnPersson()">新增</a-button>
        </div>
        <ul class="equip_list clearfix" v-if="deviceList.length">
          <li class="item wow fadeInUp animated" data-wow-delay="0.1s" v-for="item in deviceList" :key="item.id">
            <router-link :to="{path: '/deviceInformation/deviceInformationDetail', query: {deviceId: item.id}}">
              <a href="#">
                <img v-if="item.imgurl" :src="item.imgurl.split(',')[0]" :alt="item.name" class="img"/>
                <img v-else src="../../../public/images/img_06.png" :alt="item.name" class="img"/>
                <h6 class="title ellipsis">{{item.name}}</h6>
                <div class="shade">
                  <h6 class="smtit">{{item.name}}</h6>
                  <div class="txt clamp">{{item.describe}}</div>
                  <em class="arrow"></em>
                </div>
              </a>
            </router-link>
          </li>
        </ul>
        <a-row v-else class="equip_list clearfix">
          <div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
        </a-row>
        <a-row v-if="deviceList.length > 0" style="margin-top: 10px;">
          <a-col>
            <a-pagination
              style="float: right;"
              v-model="pageNo"
              :page-size-options="pageSizeOptions"
              :total="total"
              show-size-changer
              :page-size="pageSize"
              :showSizeChanger="true"
              :showQuickJumper="false"
              :show-total="showTotal"
              @showSizeChange="onShowSizeChange"
              @change="currentChage"
            >
            </a-pagination>
          </a-col>
        </a-row>
      </div>
    </div>
    </div>
  </a-spin>
</template>

<script>
import '../../../public/css/style.css'
import { getAction } from '@/api/manage'
import { isShowBtn } from "@/utils/authFilter"
export default {
  name: 'DeviceInformation',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data () {
    return {
      confirmLoading: false,
      pageSizeOptions: ['6', '12', '18', '24', '30'],
      pageNo: 1,
      pageSize: 6,
      total: 50,
      deviceList: []
    };
  },
  created() {
    this.getStaffList()
  },
  methods: {
    isShowBtnPersson() {
      return isShowBtn()
    },
    addDevice() {
      this.$router.push('/deviceInformation/addDevice')
    },
    onShowSizeChange(pageNo, pageSize) {
      this.pageNo = 1
			this.pageSize = pageSize
			this.getStaffList()
    },
    currentChage(page, pageSize) {
			this.pageSize = pageSize
			this.getStaffList()
    },
    showTotal(total, range) {
			return range[0] + "-" + range[1] + " 共" + total + "条"
		},
    getStaffList() {
      let self = this
      let params = {
        limit: self.pageSize,
        page: self.pageNo,
        columnId: '31'
      }
      if(this.articlType) {
        params.sort = this.articlType
      }
      this.confirmLoading = true
      getAction('/equipment/list', params).then(res => {
        if(res.code == 0) {
          self.deviceList = [...res.result.list]
          self.pageNo = res.result.currPage
					self.total = res.result.totalCount
        } else {
          self.$message.error(res.msg)
        }
      }).finally(() => {
        self.confirmLoading = false
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }
</style>